<!--
  * @Description: 修改手机号
  * @Author: rcc
  * @Date: 2024-08-16 10:46:53
  * @FilePath: /rc-recruitment/pages_site/pages/phone/phone.vue
-->

<template>
  <view class="p-h24">
    <rc-navigation title="修改手机号" border></rc-navigation>
    <view class="card flex m-t10">
      <image class="square-40" src="@/static/images/public/phone.png"></image>
      <view class="line"></view>
      <text class="m-r20 text-700-130">+86</text>
      <input
        v-model="formData.phone"
        class="flex-1"
        type="text"
        placeholder="请输入手机号" />
    </view>
    <view class="card flex">
      <image class="square-40" src="@/static/images/public/safety.png"></image>
      <view class="line"></view>
      <input
        v-model="formData.captcha"
        class="flex-1"
        type="text"
        placeholder="图形验证码" />
      <image
        class="captcha"
        :src="captchaUrl"
        mode="aspectFill"
        @click="refreshCaptcha"></image>
    </view>
    <view class="card flex">
      <image class="square-40" src="@/static/images/public/mail.png"></image>
      <view class="line"></view>
      <input
        v-model="formData.code"
        class="flex-1"
        type="text"
        placeholder="短信验证码" />
      <view
        class="send w-200 text-400-528 text-c"
        @click="sendCode(formData.phone, 3)">
        {{ codeText }}
      </view>
    </view>
    <view class="m-t32 text-500-428 tips">修改成功后请用新手机号码登录</view>
    <view class="flex-c">
      <rc-button
        :width="340"
        :top="100"
        text="保存"
        @click="submit"></rc-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  import useCode from '@/hooks/use-code.ts'
  import useCaptcha from '@/hooks/use-captcha.ts'
  import { useUserStore } from '@/stores/user.ts'

  import RcButton from '@/components/button.vue'
  import RcNavigation from '@/components/navigation.vue'

  const userStore = useUserStore()
  const { codeText, sendCode } = useCode()
  const { captchaUrl, refreshCaptcha } = useCaptcha()

  const isDisabled = ref(false)
  const formData = reactive({
    phone: '',
    code: '',
    captcha: '',
  })

  onLoad(() => {
    refreshCaptcha()
  })

  // 表单验证
  const formVerify = () => {
    if (isDisabled.value) { return true }

    if (formData.phone === '') {
      uni.$u.toast('请输入手机号')
      return true
    }

    return false
  }

  // 表单提交
  const submit = async () => {
    if (formVerify()) { return }

    isDisabled.value = true
    uni.showLoading({ title: '加载中...', mask: true })

    const data = {
      code: formData.code,
      mobile: formData.phone,
      captcha: formData.captcha,
    }

    const res = await uni.$u.post('/user/changemobile', data)

    if (res.code === 1) {
      userStore.getUserInfo()

      uni.hideLoading()
      uni.navigateBack()
    } else {
      uni.$u.toast(res.msg)
    }

    isDisabled.value = false
  }
</script>

<style lang="scss" scoped>
	.card {
		height: 102rpx;
		border-bottom: 1rpx solid $border-color-4;

		.line {
			height: 36rpx;
			margin: 0 20rpx;
			border-left: 1rpx solid $border-color-4;
		}

		.captcha {
			width: 180rpx;
			height: 90rpx;
			border: 1rpx solid $border-color-4;
		}

		.send {
			border-left: 1rpx solid $border-color-1;
		}
	}

	.tips {
		text-align: center;
	}
</style>
